<template>
  <div class="c-ph40">
    <div class="c-fc-xblack c-fs24 c-fw400">
      <div class="c-textAlign-c c-pt40 c-pb60 c-bd-b1">
        <div class="iconfont c-fs108 c-fc-send-green">&#xe6eb;</div>
        <div class="c-pt24 c-fs32 c-fc-xblack c-fw600">{{comeFrom == 2 ? '签到成功!' : '报名成功!'}}</div>
      </div>
      <div class="c-pt40 c-pb60">
        <div class="c-flex-row ">
          <div class="c-fc-gray c-ws-n c-mr20 c-ww100">{{comeFrom == 2 ? '签到内容' : '活动名称'}}:</div>
          <div class="c-lh36">{{info.name}}</div>
        </div>
        <div class="c-ws-n c-text-ellipsis1 c-pt16" v-if="comeFrom == 2 && info.signUpTime || (info.enrollStartAt && info.enrollEndAt && comeFrom == 1)">
          <span class="c-fc-gray c-ws-n c-mr20 c-ww100 c-inlineblack">{{comeFrom == 2 ? '签到时间' : '活动时间'}}:</span>{{comeFrom == 2 ? `${info.signUpTime}` : `${info.enrollStartAt.substr(0,16)} 至 ${info.enrollEndAt.substr(0,16)}`}}</div>
        <div v-if="comeFrom == 2">
          <div class="c-pt16 c-fc-gray" v-if="info.enrollData">签到用户<span v-if="dataLength > 1" class="c-pl20">({{dataLength}}人)</span>:</div>
          <div class="c-mt16 c-br8 boxShow">
            <div class="c-ph32 c-pb20">
              <div class="c-pv20" :class="dataLength == index+1 ? '' : 'c-bd-b1'" v-for="(item, index) in info.enrollData" :key="index" v-if="info.enrollData && index <=1">
                <div class="c-ws-n c-text-ellipsis1"><span class="c-fc-gray c-ws-n c-mr20">姓名:</span>{{item.name}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10" v-if="item.mobile"><span class="c-fc-gray c-ws-n c-mr20">电话:</span>{{item.mobile}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10"><span class="c-fc-gray c-ws-n c-mr20">票号:</span>{{item.ticketNo}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10" v-if="item.groupName"><span class="c-fc-gray c-ws-n c-mr20">分组:</span>{{item.groupName}}</div>
              </div>
              <div class="c-pt16 c-fc-xblue c-flex-row c-justify-sb c-aligni-center" @click="moreSign" v-if="dataLength > 2 && isShowMoreSing == false">
                <span v-if="info.enrollData">展开剩余{{dataLength - 2}}人</span>
                <span class="iconfont">&#xe6a9;</span>
              </div>
              <div class="c-pv20" :class="dataLength == index+1 ? '' : 'c-bd-b1'" v-for="(item, index) in info.enrollData" :key="index" v-if="info.enrollData && index >=2 && isShowMoreSing == true">
                <div class="c-ws-n c-text-ellipsis1"><span class="c-fc-gray c-ws-n c-mr20">姓名:</span>{{item.name}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10" v-if="item.mobile"><span class="c-fc-gray c-ws-n c-mr20">电话:</span>{{item.mobile}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10"><span class="c-fc-gray c-ws-n c-mr20">票号:</span>{{item.ticketNo}}</div>
                <div class="c-ws-n c-text-ellipsis1 c-pt10" v-if="item.groupName"><span class="c-fc-gray c-ws-n c-mr20">分组:</span>{{item.groupName}}</div>
              </div>
              <div class="c-pt16 c-fc-xblue c-flex-row c-justify-sb c-aligni-center" @click="moreSign" v-if="dataLength > 2 && isShowMoreSing == true">
                <span v-if="info.enrollData">收起</span>
                <span class="iconfont">&#xe6ab;</span>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="c-pt16 c-flex-row">
            <span class="c-fc-gray c-ws-n c-mr20 c-inlineblack c-ww100">报名人:</span>
            <div class="c-w0 c-flex-grow1">
              <span>{{info.nickname}}</span>
              <span v-if="info.mobile">(tel: {{info.mobile}})</span>
            </div>
          </div>
          <div class="c-pt16 c-flex-row">
            <span class="c-fc-gray c-ws-n c-mr20 c-inlineblack c-ww100">推荐人:</span>
            <div class="c-w0 c-flex-grow1">
              <span>{{info.reNickName}}</span>
              <span v-if="info.reMobile">(tel: {{info.reMobile}})</span>
            </div>
          </div>
          <div class="c-flex-row c-pt16 c-pb20">
            <div class="c-fc-gray">
              <div class="c-ww100 c-mr20">参与者:</div>
              <div class="c-ww100 c-mr20" v-if="info.enrollData && dataLength > 1">({{dataLength}}个人)</div>
            </div>
            <div class="c-lh36">
              <div v-for="(item, index) in info.enrollData" :key="index" :class="index == 0 ? '' : 'c-pt16'" v-if="index <=4">{{item.name}}<span v-if="item.mobile">(tel: {{item.mobile}})</span></div>
              <div class="c-pt16 c-fc-xblue c-flex-row c-justify-sb c-aligni-center" v-if="dataLength>5 && isShowMoreEnroll == false" @click="moreEnroll">
                <span>展开剩余{{dataLength - 5}}人</span>
                <span class="iconfont">&#xe6a9;</span>
              </div>
              <div class="c-pt16" v-for="(item, index) in info.enrollData" :key="index" v-if="isShowMoreEnroll ==true && index>4">{{item.name}}<span v-if="item.mobile">(tel: {{item.mobile}})</span></div>
              <div class="c-pt16 c-fc-xblue c-flex-row c-justify-sb c-aligni-center" v-if="dataLength>5 && isShowMoreEnroll == true" @click="moreEnroll">
                <span>收起</span>
                <span class="iconfont">&#xe6ab;</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'ActivitySign',
  data() {
    return {
      isShowMoreSing: false,
      isShowMoreEnroll: false,
      comeFrom: 0,
      info: [],
      dataLength: 0,
      asId: '', //场次id
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    moreSign() {
      this.isShowMoreSing = !this.isShowMoreSing;
    },
    moreEnroll() {
      this.isShowMoreEnroll = !this.isShowMoreEnroll;
    },
    getInfo() {
      let url = `enrollId=${this.enrollId}&type=${this.comeFrom}&activityId=${this.activityId}`
      let urls = this.comeFrom == 2 ? url + `&asId=${this.asId}` : url + `&identCode=${this.identCode}`
      utilJs.getMethod(global.apiurl + "activities/activityEnroll?" + urls, res => {
        this.info = res;
        this.dataLength = res.enrollData.length;
        this.wechatShare();
      })
    },
    //分享
    wechatShare: function () {
      let title = this.info.name;
      let shareUrl = `${window.location.href.split("#")[0]}#/activity/activityDetail?ActivityNo=${this.$route.query.activityId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.info.name;
      let shareUrl = `${window.location.href.split("#")[0]}#/activity/activityDetail?ActivityNo=${this.$route.query.activityId}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    }
  },
  activated() {
    this.comeFrom = this.$route.query.type;
    this.activityId = this.$route.query.activityId;
    this.identCode = this.$route.query.identCode;
    this.enrollId = this.$route.query.enrollId || '';
    this.asId = this.$route.query.asId || '';
    this.info = [];
    if (this.comeFrom == 1) {
      setDocumentTitle("报名成功");// eslint-disable-line
    } else {
      setDocumentTitle("签到成功");// eslint-disable-line
    }
    this.dataLength = 0;
    this.isShowMoreSing = false;
    this.isShowMoreEnroll = false;
    this.getInfo();
  }
}
</script>
<style scoped>
.boxShow {
  box-shadow: 0px 4px 10px 3px rgba(0, 0, 0, 0.04);
}
</style>